<template>
  <div>
    <div>home</div>
    <div @click="goto('pageB')" class="btn">点击跳转pageB</div>
    <div class="title">测试less 颜色蓝色</div>
    <div class="t-red">测试全局less 颜色红色 字体20px</div>
    <div class="red">测试全局less 颜色红色</div>
    <div style="margin: 20px 0">
      这是测试element-plus
      <br />
      <ElButton>Click me</ElButton>
    </div>
    <div style="margin: 20px 0">
      <div>下面是异步组件的示例,3秒展示</div>
      <Suspense>
        <component :is="AsyncComp" />
        <template #fallback>
          <div>加载中....</div>
        </template>
      </Suspense>
    </div>
    <div mtb-10px>
      <div>这是测试unocss</div>
      <span cool-blue>测试shortcuts功能 :cool-blue</span>
      <div myTitle>测试rule : myTitle</div>
      <div>
        测试icons
        <div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy"></div>
      </div>
    </div>
    <div>
      <div>这是测试接口axios,需要本地打开mock数据</div>
      <div>返回数据:</div>
      <div v-for="(item, i) in data" :key="i">
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { get, post } from "@/api";

// unplugin-auto-import 自动引入
// import { defineAsyncComponent } from "vue";

// 异步组件使用1 方便展示 做了延迟
const AsyncComp = defineAsyncComponent(() => {
  return new Promise(resove => {
    setTimeout(() => {
      resove(import("@/components/AsyncComp.vue"));
    }, 3000);
  });
});
// 异步组件使用2 普通方法
// const AsyncComp = defineAsyncComponent(() => import("@/components/AsyncComp.vue"));
const router = useRouter();
// 路由跳转
function goto(url) {
  router.push(url);
}
// 测试接口
const data = ref([]);
function queryEventHandleList() {
  post("/api/test").then(res => {
    data.value = res.data.data;
  });
}
queryEventHandleList();
</script>
<style lang="less" scoped>
@blue: blue;
.title {
  color: @blue;
}
.red {
  color: @red; // 全局less assets/css/common.less
}
</style>
